<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <link rel="stylesheet" href="../plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../common/css/nav.css">
    <link rel="stylesheet" href="../css/user copy.css">

    <link rel="stylesheet" href="../plugins/font-awesome-4.7.0/css/font-awesome.min.css">


</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light " id="nav">

  <div class="collapse navbar-collapse col-md-10 offset-md-1 animate__animated  animate__zoomIn"
    id="navbarSupportedContent">
    <a id="logo-img" class="navbar-brand" href="../view/index.html">
      <img alt="Brand" src="../common/imgs/logo_small.png">
    </a>
    <ul class="navbar-nav mr-auto">
      <!-- <li class="nav-item">
        <a id="select-city" class="nav-link" href="#"><svg id="city-icon" class="bi bi-building" width="1em"
            height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd"
              d="M15.285.089A.5.5 0 0 1 15.5.5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5H1a.5.5 0 0 1-.5-.5v-6a.5.5 0 0 1 .418-.493l5.582-.93V3.5a.5.5 0 0 1 .324-.468l8-3a.5.5 0 0 1 .46.057zM7.5 3.846V8.5a.5.5 0 0 1-.418.493l-5.582.93V15h8v-1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V15h2V1.222l-7 2.624z" />
            <path fill-rule="evenodd" d="M6.5 15.5v-7h1v7h-1z" />
            <path
              d="M2.5 11h1v1h-1v-1zm2 0h1v1h-1v-1zm-2 2h1v1h-1v-1zm2 0h1v1h-1v-1zm6-10h1v1h-1V3zm2 0h1v1h-1V3zm-4 2h1v1h-1V5zm2 0h1v1h-1V5zm2 0h1v1h-1V5zm-2 2h1v1h-1V7zm2 0h1v1h-1V7zm-4 0h1v1h-1V7zm0 2h1v1h-1V9zm2 0h1v1h-1V9zm2 0h1v1h-1V9zm-4 2h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1z" />
          </svg>选择城市</a>
      </li> -->
    </ul>
    <ul class="navbar-nav mr-5 ">
      <li class="nav-item">
        <a class="nav-link" href="../view/searchhouse.html">租房</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="../view/issuehouse.html">发布房源</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="../view/roomate.html">寻找室友</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="../view/PriceTrendChart.html">房价走势</a>
      </li>
      <li  class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
          指南
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="Agreement.html">用户协议</a>
          <a class="dropdown-item" href="Potplayer.html">隐私政策</a>
          <a class="dropdown-item" href="Commitment.html">服务承诺</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="about.html">关于我们</a>
        </div>
      </li>
    </ul>
    <!-- <a href="login.html" id="login-button" class="btn btn-outline-success active animate__animated animate__pulse" role="button"
      aria-pressed="true">登录</a>
    <a href="register.html" id="register-button" class="btn btn-outline-success active animate__animated animate__pulse" role="button"
      aria-pressed="true">注册</a> -->
    <div class="user-message">
      <a href="user.html" class="user-head"><img id="user-img" src="../imgs/userimg.jpg" alt="用户头像"></a>
      <a href="user.html" class="user-name">用户名/手机号</a>
    </div>
  </div>
  </nav>

  <div class="container">
    <div class="row" style="margin-bottom: 30px;">
      <div class="col">
        <div class="jumbotron233">
          <div class="row" id="welcome">
            <h1 class="display-4">欢迎回来 !</h1>
          </div>

          <div id="picture" >
            <a class="nav-link nav-link-user-img" id="v-pills-profile-tab"  href="javascript:void(0)" role="tab" aria-selected="false"><img src="../imgs/userimg.jpg"  style="width:200px;height: 200px; border: 10px solid white;" alt="图片加载失败"></a>
          </div>

          <div class="row justify-content-end">
            <div class="col-10">
              <div class="col-md-10 offset-md-1 row">
                <div class="base-message col-md-6" >
                  <ul class="list-group list-group-flush">
                    <li class="list-group-item">用户名 :</li>
                    <li class="list-group-item">性别 :</li>
                  </ul>
                  <div class="accordion" id="accordionExample">
                    <div class="card" style="border: 0px;">
                      <div class="card-header" id="headingOne" style="background-color: white">
                        <h2 class="mb-0">
                          <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" style="padding: 0px; background-color: white;">
                            点击查看详细信息
                          </button>
                        </h2>
                      </div>
                      <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                        <div class="card-body">
                          <div class="base-message col-md">
                            <ul class="list-group list-group-flush">
                              <li class="list-group-item">真实姓名 :</li>
                              <li class="list-group-item">性别 :</li>
                              <li class="list-group-item">电话 :</li>
                              <li class="list-group-item">身份证号 :</li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <a class="btn btn-primary btn-lg btn-success" href="../view/user-person.html" role="button">编辑个人资料</a>
            </div>
          </div>

        </div>
      </div>
    </div>

    <div class="row">
      <div class="col">
        <ul class="nav" style="box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);">
          <li class="nav-item">
            <a class="nav-link active" href="#">用户名</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="v-pills-attention-tab" data-toggle="pill" href="#v-pills-attention" role="tab" aria-controls="v-pills-attention" aria-selected="false">关注</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="v-pills-release-tab" data-toggle="pill" href="#v-pills-release" role="tab" aria-controls="v-pills-release" aria-selected="false">发布</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="v-pills-rent-tab" data-toggle="pill" href="#v-pills-rent" role="tab" aria-controls="v-pills-rent" aria-selected="false">出租</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="v-pills-comment-tab" data-toggle="pill" href="#v-pills-comment" role="tab" aria-controls="v-pills-comment" aria-selected="false">评论</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="v-pills-broker-tab" data-toggle="pill" href="#v-pills-broker" role="tab" aria-controls="v-pills-broker" aria-selected="false">经纪人</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="v-pills-history-tab" data-toggle="pill" href="#v-pills-history" role="tab" aria-controls="v-pills-history" aria-selected="false">历史</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  
  <div class="container" >
    <div class="row">
      <div class="col">
        <div class="tab-content" id="v-pills-tabContent" style="box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); padding-bottom: 10px; margin-bottom: 30px;">
          <div class="tab-pane fade show active" id="v-pills-attention" role="tabpanel" aria-labelledby="v-pills-attention-tab">
            <nav class="navbar navbar-light bg-light" id="nav-row">
              <span class="navbar-brand mb-0 h1">我关注的房源</span>
            </nav>
            <div class="row">
              <div class="col-8">
                <div class="input-group mb-3">
                  <input type="text" class="form-control" placeholder="输入关键字" aria-label="输入关键字" aria-describedby="button-addon2">
                  <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button" id="button-addon2">搜索</button>
                  </div>
                </div>
              </div>
              <div class="col-4">
                <div class="btn-group btn-group-sm" role="group" >
                  <button type="button" class="btn btn-secondary">排序</button>  
                  <button type="button" class="btn btn-secondary" id="btn-price">价格</button>
                  <button type="button" class="btn btn-secondary" id="btn-area">日期</button>
                </div>
              </div>
            </div>
            <div id="houses">
              <div class="search-result-card">
                <div class="row">
                  <div class="col-md-10">
                    <div class="card result-card animate__animated animate__flipInX" style="width: 100%;">
                      <div class="row no-gutters">
                        <div class="col-md-2">
                          <a href="#"><img src="../imgs/house.png" class="card-img" alt="图片加载失败"></a>
                        </div>
                        <div class="col-md-9 offset-md-1">
                          <div class="card-body">
                            <a href="#">
                              <span><span class="card-title">房源信息标题</span>&nbsp;&nbsp;<span class="badge badge-secondary">要啥有啥</span>&nbsp;<span class="badge badge-secondary">十全十美</span></span>
                            </a>
                            <p class="card-text"><small class="text-muted">房源内容描述...</small></p>
                            <div class="card-text row">
                              <div class="col-md-2"><small class="text-muted">地区地址</small></div>
                              <div class="col-md-2"><small class="text-muted">xxm<sup>2</sup></small></div>
                              <div class="col-md-2"><small class="text-muted">朝向</small></div>
                              <div class="col-md-3"><small class="text-muted">x厅x室x卫x厨</small></div>
                            </div>
                            <div class="mark-house-price">1666元/月</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-2">
                    <div class="collect">
                      <small class="text-muted">
                      <a href="#" class="card-link"><i class="fa fa-heart-o collect-icon">&nbsp;取消收藏</i></a>
                      </small>
                    </div>
                  </div>
                </div>
              </div>
              <div class="search-result-card">
                <div class="row">
                  <div class="col-md-10">
                    <div class="card result-card animate__animated animate__flipInX" style="width: 100%;">
                      <div class="row no-gutters">
                        <div class="col-md-2">
                          <a href="#"><img src="../imgs/house.png" class="card-img" alt="图片加载失败"></a>
                        </div>
                        <div class="col-md-9 offset-md-1">
                          <div class="card-body">
                            <a href="#">
                              <span><span class="card-title">房源信息标题</span>&nbsp;&nbsp;<span class="badge badge-secondary">要啥有啥</span>&nbsp;<span class="badge badge-secondary">十全十美</span></span>
                            </a>
                            <p class="card-text"><small class="text-muted">房源内容描述...</small></p>
                            <div class="card-text row">
                              <div class="col-md-2"><small class="text-muted">地区地址</small></div>
                              <div class="col-md-2"><small class="text-muted">xxm<sup>2</sup></small></div>
                              <div class="col-md-2"><small class="text-muted">朝向</small></div>
                              <div class="col-md-3"><small class="text-muted">x厅x室x卫x厨</small></div>
                            </div>
                            <div class="mark-house-price">1666元/月</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-2">
                    <div class="collect">
                      <small class="text-muted">
                      <a href="#" class="card-link"><i class="fa fa-heart-o collect-icon">&nbsp;取消收藏</i></a>
                      </small>
                    </div>
                  </div>
                </div>
              </div>
              <div class="search-result-card">
                <div class="row">
                  <div class="col-md-10">
                    <div class="card result-card animate__animated animate__flipInX" style="width: 100%;">
                      <div class="row no-gutters">
                        <div class="col-md-2">
                          <a href="#"><img src="../imgs/house.png" class="card-img" alt="图片加载失败"></a>
                        </div>
                        <div class="col-md-9 offset-md-1">
                          <div class="card-body">
                            <a href="#">
                              <span><span class="card-title">房源信息标题</span>&nbsp;&nbsp;<span class="badge badge-secondary">要啥有啥</span>&nbsp;<span class="badge badge-secondary">十全十美</span></span>
                            </a>
                            <p class="card-text"><small class="text-muted">房源内容描述...</small></p>
                            <div class="card-text row">
                              <div class="col-md-2"><small class="text-muted">地区地址</small></div>
                              <div class="col-md-2"><small class="text-muted">xxm<sup>2</sup></small></div>
                              <div class="col-md-2"><small class="text-muted">朝向</small></div>
                              <div class="col-md-3"><small class="text-muted">x厅x室x卫x厨</small></div>
                            </div>
                            <div class="mark-house-price">1666元/月</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-2">
                    <div class="collect">
                      <small class="text-muted">
                      <a href="#" class="card-link"><i class="fa fa-heart-o collect-icon">&nbsp;取消收藏</i></a>
                      </small>
                    </div>
                  </div>
                </div>
              </div>
              <div class="search-result-card">
                <div class="row">
                  <div class="col-md-10">
                    <div class="card result-card animate__animated animate__flipInX" style="width: 100%;">
                      <div class="row no-gutters">
                        <div class="col-md-2">
                          <a href="#"><img src="../imgs/house.png" class="card-img" alt="图片加载失败"></a>
                        </div>
                        <div class="col-md-9 offset-md-1">
                          <div class="card-body">
                            <a href="#">
                              <span><span class="card-title">房源信息标题</span>&nbsp;&nbsp;<span class="badge badge-secondary">要啥有啥</span>&nbsp;<span class="badge badge-secondary">十全十美</span></span>
                            </a>
                            <p class="card-text"><small class="text-muted">房源内容描述...</small></p>
                            <div class="card-text row">
                              <div class="col-md-2"><small class="text-muted">地区地址</small></div>
                              <div class="col-md-2"><small class="text-muted">xxm<sup>2</sup></small></div>
                              <div class="col-md-2"><small class="text-muted">朝向</small></div>
                              <div class="col-md-3"><small class="text-muted">x厅x室x卫x厨</small></div>
                            </div>
                            <div class="mark-house-price">1666元/月</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-2">
                    <div class="collect">
                      <small class="text-muted">
                      <a href="#" class="card-link"><i class="fa fa-heart-o collect-icon">&nbsp;取消收藏</i></a>
                      </small>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div id="house-page">
              <nav aria-label="Page navigation example">
                <ul class="pagination">
                  <li class="page-item">
                    <a class="page-link" href="#" aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                    </a>
                  </li>
                  <li class="page-item"><a class="page-link" href="#">1</a></li>
                  <li class="page-item"><a class="page-link" href="#">2</a></li>
                  <li class="page-item"><a class="page-link" href="#">3</a></li>
                  <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
          <div class="tab-pane fade" id="v-pills-release" role="tabpanel" aria-labelledby="v-pills-release-tab">
            <nav class="navbar navbar-light bg-light" id="nav-row">
              <span class="navbar-brand mb-0 h1">我发布的房源</span>
            </nav>
            <div class="row">
              <div class="col-8">
                <div class="input-group mb-3">
                  <input type="text" class="form-control" placeholder="输入关键字" aria-label="输入关键字" aria-describedby="button-addon2">
                  <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button" id="button-addon2">搜索</button>
                  </div>
                </div>
              </div>
              <div class="col-4">
                <div class="btn-group btn-group-sm" role="group" >
                  <button type="button" class="btn btn-secondary">排序</button>  
                  <button type="button" class="btn btn-secondary" id="btn-price">价格</button>
                  <button type="button" class="btn btn-secondary" id="btn-area">日期</button>
                </div>
              </div>
            </div>          
            <div>
              <div class="search-result-card">
                <div class="row">
                  <div class="col-md-10">
                    <div class="card result-card animate__animated animate__flipInX" style="width: 100%;">
                      <div class="row no-gutters">
                        <div class="col-md-2">
                          <a href="#"><img src="../imgs/house.png" class="card-img" alt="图片加载失败"></a>
                        </div>
                        <div class="col-md-9 offset-md-1">
                          <div class="card-body">
                            <a href="#">
                              <span><span class="card-title">房源信息标题</span>&nbsp;&nbsp;<span class="badge badge-secondary">要啥有啥</span>&nbsp;<span class="badge badge-secondary">十全十美</span></span>
                            </a>
                            <p class="card-text"><small class="text-muted">房源内容描述...</small></p>
                            <div class="card-text row">
                              <div class="col-md-2"><small class="text-muted">地区地址</small></div>
                              <div class="col-md-2"><small class="text-muted">xxm<sup>2</sup></small></div>
                              <div class="col-md-2"><small class="text-muted">朝向</small></div>
                              <div class="col-md-3"><small class="text-muted">x厅x室x卫x厨</small></div>
                            </div>
                            <div class="mark-house-price">1666元/月</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-2">
                    <div class="collect" style="margin-top: 30px;">
                      <small class="text-muted">
                        <a href="#" class="card-link">&nbsp;提交修改申请</a><br>
                        <a href="#" class="card-link">&nbsp;提交删除申请</a>
                      </small>
                    </div>
                  </div>
                </div>
              </div>
              <div class="search-result-card">
                <div class="row">
                  <div class="col-md-10">
                    <div class="card result-card animate__animated animate__flipInX" style="width: 100%;">
                      <div class="row no-gutters">
                        <div class="col-md-2">
                          <a href="#"><img src="../imgs/house.png" class="card-img" alt="图片加载失败"></a>
                        </div>
                        <div class="col-md-9 offset-md-1">
                          <div class="card-body">
                            <a href="#">
                              <span><span class="card-title">房源信息标题</span>&nbsp;&nbsp;<span class="badge badge-secondary">要啥有啥</span>&nbsp;<span class="badge badge-secondary">十全十美</span></span>
                            </a>
                            <p class="card-text"><small class="text-muted">房源内容描述...</small></p>
                            <div class="card-text row">
                              <div class="col-md-2"><small class="text-muted">地区地址</small></div>
                              <div class="col-md-2"><small class="text-muted">xxm<sup>2</sup></small></div>
                              <div class="col-md-2"><small class="text-muted">朝向</small></div>
                              <div class="col-md-3"><small class="text-muted">x厅x室x卫x厨</small></div>
                            </div>
                            <div class="mark-house-price">1666元/月</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-2">
                    <div class="collect" style="margin-top: 30px;">
                      <small class="text-muted">
                        <a href="#" class="card-link">&nbsp;提交修改申请</a><br>
                        <a href="#" class="card-link">&nbsp;提交删除申请</a>
                      </small>
                    </div>
                  </div>
                </div>
              </div>
              <div class="search-result-card">
                <div class="row">
                  <div class="col-md-10">
                    <div class="card result-card animate__animated animate__flipInX" style="width: 100%;">
                      <div class="row no-gutters">
                        <div class="col-md-2">
                          <a href="#"><img src="../imgs/house.png" class="card-img" alt="图片加载失败"></a>
                        </div>
                        <div class="col-md-9 offset-md-1">
                          <div class="card-body">
                            <a href="#">
                              <span><span class="card-title">房源信息标题</span>&nbsp;&nbsp;<span class="badge badge-secondary">要啥有啥</span>&nbsp;<span class="badge badge-secondary">十全十美</span></span>
                            </a>
                            <p class="card-text"><small class="text-muted">房源内容描述...</small></p>
                            <div class="card-text row">
                              <div class="col-md-2"><small class="text-muted">地区地址</small></div>
                              <div class="col-md-2"><small class="text-muted">xxm<sup>2</sup></small></div>
                              <div class="col-md-2"><small class="text-muted">朝向</small></div>
                              <div class="col-md-3"><small class="text-muted">x厅x室x卫x厨</small></div>
                            </div>
                            <div class="mark-house-price">1666元/月</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-2">
                    <div class="collect" style="margin-top: 30px;">
                      <small class="text-muted">
                        <a href="#" class="card-link">&nbsp;提交修改申请</a><br>
                        <a href="#" class="card-link">&nbsp;提交删除申请</a>
                      </small>
                    </div>
                  </div>
                </div>
              </div>
              <div class="search-result-card">
                <div class="row">
                  <div class="col-md-10">
                    <div class="card result-card animate__animated animate__flipInX" style="width: 100%;">
                      <div class="row no-gutters">
                        <div class="col-md-2">
                          <a href="#"><img src="../imgs/house.png" class="card-img" alt="图片加载失败"></a>
                        </div>
                        <div class="col-md-9 offset-md-1">
                          <div class="card-body">
                            <a href="#">
                              <span><span class="card-title">房源信息标题</span>&nbsp;&nbsp;<span class="badge badge-secondary">要啥有啥</span>&nbsp;<span class="badge badge-secondary">十全十美</span></span>
                            </a>
                            <p class="card-text"><small class="text-muted">房源内容描述...</small></p>
                            <div class="card-text row">
                              <div class="col-md-2"><small class="text-muted">地区地址</small></div>
                              <div class="col-md-2"><small class="text-muted">xxm<sup>2</sup></small></div>
                              <div class="col-md-2"><small class="text-muted">朝向</small></div>
                              <div class="col-md-3"><small class="text-muted">x厅x室x卫x厨</small></div>
                            </div>
                            <div class="mark-house-price">1666元/月</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-2">
                    <div class="collect" style="margin-top: 30px;">
                      <small class="text-muted">
                        <a href="#" class="card-link">&nbsp;提交修改申请</a><br>
                        <a href="#" class="card-link">&nbsp;提交删除申请</a>
                      </small>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div id="house-page">
              <nav aria-label="Page navigation example">
                <ul class="pagination">
                  <li class="page-item">
                    <a class="page-link" href="#" aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                    </a>
                  </li>
                  <li class="page-item"><a class="page-link" href="#">1</a></li>
                  <li class="page-item"><a class="page-link" href="#">2</a></li>
                  <li class="page-item"><a class="page-link" href="#">3</a></li>
                  <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
          <div class="tab-pane fade" id="v-pills-rent" role="tabpanel" aria-labelledby="v-pills-rent-tab">
            <nav class="navbar navbar-light bg-light" id="nav-row">
              <span class="navbar-brand mb-0 h1">我租赁的房源</span>
            </nav>
            <div class="row">
              <div class="col-8">
                <div class="input-group mb-3">
                  <input type="text" class="form-control" placeholder="输入关键字" aria-label="输入关键字" aria-describedby="button-addon2">
                  <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button" id="button-addon2">搜索</button>
                  </div>
                </div>
              </div>
              <div class="col-4">
                <div class="btn-group btn-group-sm" role="group" >
                  <button type="button" class="btn btn-secondary">排序</button>  
                  <button type="button" class="btn btn-secondary" id="btn-price">价格</button>
                  <button type="button" class="btn btn-secondary" id="btn-area">日期</button>
                </div>
              </div>
            </div>
            <div class="search-result-card">
              <div class="row">
                <div class="col-md-10">
                  <div class="card result-card animate__animated animate__flipInX" style="width: 100%;">
                    <div class="row no-gutters">
                      <div class="col-md-2">
                        <a href="#"><img src="../imgs/house.png" class="card-img" alt="图片加载失败"></a>
                      </div>
                      <div class="col-md-9 offset-md-1">
                        <div class="card-body">
                          <a href="#">
                            <span><span class="card-title">房源信息标题</span>&nbsp;&nbsp;<span class="badge badge-secondary">要啥有啥</span>&nbsp;<span class="badge badge-secondary">十全十美</span></span>
                          </a>
                          <p class="card-text"><small class="text-muted">房源内容描述...</small></p>
                          <div class="card-text row">
                            <div class="col-md-2"><small class="text-muted">地区地址</small></div>
                            <div class="col-md-2"><small class="text-muted">xxm<sup>2</sup></small></div>
                            <div class="col-md-2"><small class="text-muted">朝向</small></div>
                            <div class="col-md-3"><small class="text-muted">x厅x室x卫x厨</small></div>
                          </div>
                          <div class="mark-house-price">1666元/月</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-2 upload-contract">
                  <form>
                    <div class="form-group">
                      <div class="btn  btn-outline-success upload-photo">上传合同
                        <input class="upload-photo-btn" type="file" accept="image/jpg,image/png,image/jpeg,image/bmp">
                        </div>
                    </div>
                  </form>
              </div>
              </div>
            </div>
            <div class="search-result-card">
              <div class="row">
                <div class="col-md-10">
                  <div class="card result-card animate__animated animate__flipInX" style="width: 100%;">
                    <div class="row no-gutters">
                      <div class="col-md-2">
                        <a href="#"><img src="../imgs/house.png" class="card-img" alt="图片加载失败"></a>
                      </div>
                      <div class="col-md-9 offset-md-1">
                        <div class="card-body">
                          <a href="#">
                            <span><span class="card-title">房源信息标题</span>&nbsp;&nbsp;<span class="badge badge-secondary">要啥有啥</span>&nbsp;<span class="badge badge-secondary">十全十美</span></span>
                          </a>
                          <p class="card-text"><small class="text-muted">房源内容描述...</small></p>
                          <div class="card-text row">
                            <div class="col-md-2"><small class="text-muted">地区地址</small></div>
                            <div class="col-md-2"><small class="text-muted">xxm<sup>2</sup></small></div>
                            <div class="col-md-2"><small class="text-muted">朝向</small></div>
                            <div class="col-md-3"><small class="text-muted">x厅x室x卫x厨</small></div>
                          </div>
                          <div class="mark-house-price">1666元/月</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-2 upload-contract">
                  <form>
                    <div class="form-group">
                      <div class="btn  btn-outline-success upload-photo">上传合同
                        <input class="upload-photo-btn" type="file" accept="image/jpg,image/png,image/jpeg,image/bmp">
                        </div>
                    </div>
                  </form>
              </div>
              </div>
            </div>
            <div class="search-result-card">
              <div class="row">
                <div class="col-md-10">
                  <div class="card result-card animate__animated animate__flipInX" style="width: 100%;">
                    <div class="row no-gutters">
                      <div class="col-md-2">
                        <a href="#"><img src="../imgs/house.png" class="card-img" alt="图片加载失败"></a>
                      </div>
                      <div class="col-md-9 offset-md-1">
                        <div class="card-body">
                          <a href="#">
                            <span><span class="card-title">房源信息标题</span>&nbsp;&nbsp;<span class="badge badge-secondary">要啥有啥</span>&nbsp;<span class="badge badge-secondary">十全十美</span></span>
                          </a>
                          <p class="card-text"><small class="text-muted">房源内容描述...</small></p>
                          <div class="card-text row">
                            <div class="col-md-2"><small class="text-muted">地区地址</small></div>
                            <div class="col-md-2"><small class="text-muted">xxm<sup>2</sup></small></div>
                            <div class="col-md-2"><small class="text-muted">朝向</small></div>
                            <div class="col-md-3"><small class="text-muted">x厅x室x卫x厨</small></div>
                          </div>
                          <div class="mark-house-price">1666元/月</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-2 upload-contract">
                  <form>
                    <div class="form-group">
                      <div class="btn  btn-outline-success upload-photo">上传合同
                        <input class="upload-photo-btn" type="file" accept="image/jpg,image/png,image/jpeg,image/bmp">
                        </div>
                    </div>
                  </form>
              </div>
              </div>
            </div>
            <div class="search-result-card">
              <div class="row">
                <div class="col-md-10">
                  <div class="card result-card animate__animated animate__flipInX" style="width: 100%;">
                    <div class="row no-gutters">
                      <div class="col-md-2">
                        <a href="#"><img src="../imgs/house.png" class="card-img" alt="图片加载失败"></a>
                      </div>
                      <div class="col-md-9 offset-md-1">
                        <div class="card-body">
                          <a href="#">
                            <span><span class="card-title">房源信息标题</span>&nbsp;&nbsp;<span class="badge badge-secondary">要啥有啥</span>&nbsp;<span class="badge badge-secondary">十全十美</span></span>
                          </a>
                          <p class="card-text"><small class="text-muted">房源内容描述...</small></p>
                          <div class="card-text row">
                            <div class="col-md-2"><small class="text-muted">地区地址</small></div>
                            <div class="col-md-2"><small class="text-muted">xxm<sup>2</sup></small></div>
                            <div class="col-md-2"><small class="text-muted">朝向</small></div>
                            <div class="col-md-3"><small class="text-muted">x厅x室x卫x厨</small></div>
                          </div>
                          <div class="mark-house-price">1666元/月</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-2 upload-contract">
                  <form>
                    <div class="form-group">
                      <div class="btn  btn-outline-success upload-photo">上传合同
                        <input class="upload-photo-btn" type="file" accept="image/jpg,image/png,image/jpeg,image/bmp">
                        </div>
                    </div>
                  </form>
              </div>
              </div>
            </div>
            <div id="house-page">
              <nav aria-label="Page navigation example">
                <ul class="pagination">
                  <li class="page-item">
                    <a class="page-link" href="#" aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                    </a>
                  </li>
                  <li class="page-item"><a class="page-link" href="#">1</a></li>
                  <li class="page-item"><a class="page-link" href="#">2</a></li>
                  <li class="page-item"><a class="page-link" href="#">3</a></li>
                  <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
          <div class="tab-pane fade" id="v-pills-comment" role="tabpanel" aria-labelledby="v-pills-comment-tab">
            <nav class="navbar navbar-light bg-light" id="nav-row">
              <span class="navbar-brand mb-0 h1">我的评论</span>
            </nav>
            <div class="row">
              <div class="col-8">
                <div class="input-group mb-3">
                  <input type="text" class="form-control" placeholder="输入关键字" aria-label="输入关键字" aria-describedby="button-addon2">
                  <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button" id="button-addon2">搜索</button>
                  </div>
                </div>
              </div>
              <div class="col-4">
                <div class="btn-group btn-group-sm" role="group" >
                  <button type="button" class="btn btn-secondary">排序</button>  
                  <button type="button" class="btn btn-secondary" id="btn-price">价格</button>
                  <button type="button" class="btn btn-secondary" id="btn-area">日期</button>
                </div>
              </div>
            </div>
            <div>
              <div class="card mb-3 user-card animate__animated animate__flipInX" style="width: 100%;">
                <div class="row">
                  <div class="col-md-10 row no-gutters">
                    <div class="col-md-2 post-user-img-box">
                      <img src="../imgs/house.png" class="post-user-img" alt="图片加载失败">
                    </div>               
                    <div class="col-md-10">
                      <div class="card-body">
                        <h6 class="card-title">找室友帖子标题</h6>
                        <p class="card-text"><small class="text-muted">我评论的内容</small></p><br>
                        <p class="card-text reply-text"><small class="text-muted"><a href="#">@ 用户名</a>:评论内容或回复内容</small></p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-2">
                    <div class="collect">
                      <small class="text-muted">
                      <a href="#" class="card-link">&nbsp;删除评论</a>
                      </small>
                    </div>
                  </div>
              </div>
              </div>
              <div class="card mb-3 user-card animate__animated animate__flipInX" style="width: 100%;">
                <div class="row">
                  <div class="col-md-10 row no-gutters">
                    <div class="col-md-2 post-user-img-box">
                      <img src="../imgs/house.png" class="post-user-img" alt="图片加载失败">
                    </div>               
                    <div class="col-md-10">
                      <div class="card-body">
                        <h6 class="card-title">找室友帖子标题</h6>
                        <p class="card-text"><small class="text-muted">我评论的内容</small></p><br>
                        <p class="card-text reply-text"><small class="text-muted"><a href="#">@ 用户名</a>:评论内容或回复内容</small></p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-2">
                    <div class="collect">
                      <small class="text-muted">
                      <a href="#" class="card-link">&nbsp;删除评论</a>
                      </small>
                    </div>
                  </div>
              </div>
              </div>
              <div class="card mb-3 user-card animate__animated animate__flipInX" style="width: 100%;">
                <div class="row">
                  <div class="col-md-10 row no-gutters">
                    <div class="col-md-2 post-user-img-box">
                      <img src="../imgs/house.png" class="post-user-img" alt="图片加载失败">
                    </div>               
                    <div class="col-md-10">
                      <div class="card-body">
                        <h6 class="card-title">找室友帖子标题</h6>
                        <p class="card-text"><small class="text-muted">我评论的内容</small></p><br>
                        <p class="card-text reply-text"><small class="text-muted"><a href="#">@ 用户名</a>:评论内容或回复内容</small></p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-2">
                    <div class="collect">
                      <small class="text-muted">
                      <a href="#" class="card-link">&nbsp;删除评论</a>
                      </small>
                    </div>
                  </div>
              </div>
              </div>
              <div class="card mb-3 user-card animate__animated animate__flipInX" style="width: 100%;">
                <div class="row">
                  <div class="col-md-10 row no-gutters">
                    <div class="col-md-2 post-user-img-box">
                      <img src="../imgs/house.png" class="post-user-img" alt="图片加载失败">
                    </div>               
                    <div class="col-md-10">
                      <div class="card-body">
                        <h6 class="card-title">找室友帖子标题</h6>
                        <p class="card-text"><small class="text-muted">我评论的内容</small></p><br>
                        <p class="card-text reply-text"><small class="text-muted"><a href="#">@ 用户名</a>:评论内容或回复内容</small></p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-2">
                    <div class="collect">
                      <small class="text-muted">
                      <a href="#" class="card-link">&nbsp;删除评论</a>
                      </small>
                    </div>
                  </div>
              </div>
              </div>
            </div>
            <div id="house-page">
              <nav aria-label="Page navigation example">
                <ul class="pagination">
                  <li class="page-item">
                    <a class="page-link" href="#" aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                    </a>
                  </li>
                  <li class="page-item"><a class="page-link" href="#">1</a></li>
                  <li class="page-item"><a class="page-link" href="#">2</a></li>
                  <li class="page-item"><a class="page-link" href="#">3</a></li>
                  <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
          <div class="tab-pane fade" id="v-pills-broker" role="tabpanel" aria-labelledby="v-pills-broker-tab">
            <nav class="navbar navbar-light bg-light" id="nav-row">
              <span class="navbar-brand mb-0 h1">我的经济人</span>
            </nav>

            <div class="row">
              <div class="col-8">
                <div class="input-group mb-3">
                  <input type="text" class="form-control" placeholder="输入关键字" aria-label="输入关键字" aria-describedby="button-addon2">
                  <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button" id="button-addon2">搜索</button>
                  </div>
                </div>
              </div>
            </div> 

            <div style="margin-right: 30px; margin-left: 30px;">

              <div class="search-result-card">
                <div class="card mb-3" style="max-width: 540px;">
                  <div class="row no-gutters">
                    <div class="col-md-4">
                      <a href="https://gitee.com/anruojun"><img src="../imgs/zhangpeng.jpg" class="card-img"></a>
                    </div>
                    <div class="col-md-8">
                      <div class="card-body">
                        <h5 class="card-title">张鹏</h5>
                        <ul class="list-group list-group-flush">
                          <li class="list-group-item">性别</li>
                          <li class="list-group-item">手机号</li>
                        </ul><br>
                        <a class="btn btn-primary btn-lg btn-success" href="#" role="button" style="margin-bottom:10px ;">联系我</a>                     
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="v-pills-history" role="tabpanel" aria-labelledby="v-pills-history-tab">
            <nav class="navbar navbar-light bg-light" id="nav-row">
              <span class="navbar-brand mb-0 h1">浏览历史</span>
            </nav>
            <div style="margin-top: 20px;">
              <div class="search-result-card">
                <div class="row">
                  <div class="col-md-12">
                    <div class="card result-card animate__animated animate__flipInX" style="width: 100%;">
                      <div class="row no-gutters">
                        <div class="col-md-2">
                          <a href="#"><img src="../imgs/house.png" class="card-img" alt="图片加载失败"></a>
                        </div>
                        <div class="col-md-9 offset-md-1">
                          <div class="card-body">
                            <a href="#">
                              <span><span class="card-title">房源信息标题</span>&nbsp;&nbsp;<span class="badge badge-secondary">要啥有啥</span>&nbsp;<span class="badge badge-secondary">十全十美</span></span>
                            </a>
                            <p class="card-text"><small class="text-muted">房源内容描述...</small></p>
                            <div class="card-text row">
                              <div class="col-md-2"><small class="text-muted">地区地址</small></div>
                              <div class="col-md-2"><small class="text-muted">xxm<sup>2</sup></small></div>
                              <div class="col-md-2"><small class="text-muted">朝向</small></div>
                              <div class="col-md-3"><small class="text-muted">x厅x室x卫x厨</small></div>
                            </div>
                            <div class="mark-house-price">1666元/月</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="search-result-card">
                <div class="row">
                  <div class="col-md-12">
                    <div class="card result-card animate__animated animate__flipInX" style="width: 100%;">
                      <div class="row no-gutters">
                        <div class="col-md-2">
                          <a href="#"><img src="../imgs/house.png" class="card-img" alt="图片加载失败"></a>
                        </div>
                        <div class="col-md-9 offset-md-1">
                          <div class="card-body">
                            <a href="#">
                              <span><span class="card-title">房源信息标题</span>&nbsp;&nbsp;<span class="badge badge-secondary">要啥有啥</span>&nbsp;<span class="badge badge-secondary">十全十美</span></span>
                            </a>
                            <p class="card-text"><small class="text-muted">房源内容描述...</small></p>
                            <div class="card-text row">
                              <div class="col-md-2"><small class="text-muted">地区地址</small></div>
                              <div class="col-md-2"><small class="text-muted">xxm<sup>2</sup></small></div>
                              <div class="col-md-2"><small class="text-muted">朝向</small></div>
                              <div class="col-md-3"><small class="text-muted">x厅x室x卫x厨</small></div>
                            </div>
                            <div class="mark-house-price">1666元/月</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="search-result-card">
                <div class="row">
                  <div class="col-md-12">
                    <div class="card result-card animate__animated animate__flipInX" style="width: 100%;">
                      <div class="row no-gutters">
                        <div class="col-md-2">
                          <a href="#"><img src="../imgs/house.png" class="card-img" alt="图片加载失败"></a>
                        </div>
                        <div class="col-md-9 offset-md-1">
                          <div class="card-body">
                            <a href="#">
                              <span><span class="card-title">房源信息标题</span>&nbsp;&nbsp;<span class="badge badge-secondary">要啥有啥</span>&nbsp;<span class="badge badge-secondary">十全十美</span></span>
                            </a>
                            <p class="card-text"><small class="text-muted">房源内容描述...</small></p>
                            <div class="card-text row">
                              <div class="col-md-2"><small class="text-muted">地区地址</small></div>
                              <div class="col-md-2"><small class="text-muted">xxm<sup>2</sup></small></div>
                              <div class="col-md-2"><small class="text-muted">朝向</small></div>
                              <div class="col-md-3"><small class="text-muted">x厅x室x卫x厨</small></div>
                            </div>
                            <div class="mark-house-price">1666元/月</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="search-result-card">
                <div class="row">
                  <div class="col-md-12">
                    <div class="card result-card animate__animated animate__flipInX" style="width: 100%;">
                      <div class="row no-gutters">
                        <div class="col-md-2">
                          <a href="#"><img src="../imgs/house.png" class="card-img" alt="图片加载失败"></a>
                        </div>
                        <div class="col-md-9 offset-md-1">
                          <div class="card-body">
                            <a href="#">
                              <span><span class="card-title">房源信息标题</span>&nbsp;&nbsp;<span class="badge badge-secondary">要啥有啥</span>&nbsp;<span class="badge badge-secondary">十全十美</span></span>
                            </a>
                            <p class="card-text"><small class="text-muted">房源内容描述...</small></p>
                            <div class="card-text row">
                              <div class="col-md-2"><small class="text-muted">地区地址</small></div>
                              <div class="col-md-2"><small class="text-muted">xxm<sup>2</sup></small></div>
                              <div class="col-md-2"><small class="text-muted">朝向</small></div>
                              <div class="col-md-3"><small class="text-muted">x厅x室x卫x厨</small></div>
                            </div>
                            <div class="mark-house-price">1666元/月</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div id="house-page">
                <nav aria-label="Page navigation example">
                  <ul class="pagination">
                    <li class="page-item">
                      <a class="page-link" href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                      </a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                      <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                    </li>
                  </ul>
                </nav>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>

  <script src="../plugins/jquery/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="../plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>

  <script>
   let btn_price = $("#btn-price");
   btn_price.click(function () {
     btn_text = btn_price.html();
     if (btn_text == "价格" || btn_text == "价格↓") {
       btn_text = "价格↑"
     } else {
       btn_text = "价格↓"
     }
     btn_price.html(btn_text);
   })

   let btn_area = $("#btn-area");
   btn_area.click(function () {
     btn_text = btn_area.html();
     if (btn_text == "面积" || btn_text == "面积↓") {
       btn_text = "面积↑"
     } else {
       btn_text = "面积↓"
     }
     btn_area.html(btn_text);
   })
 </script>

</body>
</html>